<template>
	<!-- vue content -->
	<view class="ver match-width" style="position: relative;">
		<image src="@/static/img/title_bg.jpg" class="match-width" style="" mode="widthFix">
		</image>
		<view style="position: absolute;top: 0;left:0;z-index: 99;width: 100vw;"
			:style="{'margin-top':titleHeight+'px'}">
			<slot></slot>
			<title-custom :title="title"></title-custom>

		</view>

	</view>

</template>
<script>
	let _this;
	export default {
		name: "title",
		//属性
		props: {
			// 属性名称: {
			// 	type: String, //属性类型
			// 	value: "值"
			// },
			// ......
			title: { //
				type: String,
				default: "标题"
			},
		},
		data() {
			return {
				// 系统状态栏的高度
				statusBarHeight: 0,
				totalHeight: 0,
				titleHeight: 0,

				scrollProgress: 0
			}
		},
		//组件生命周期
		created: function(e) {
			_this = this;
			let titleHeight = uni.upx2px(70)

			// 获取系统栏高度
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					_this.statusBarHeight = res.statusBarHeight;
					// console.log(_this.statusBarHeight, titleHeight)
					_this.totalHeight = _this.statusBarHeight + titleHeight;
					// console.log(_this.totalHeight)
					_this.titleHeight = res.statusBarHeight + uni.upx2px(70)

				}
			});


			uni.$on('onPageScroll', function(data) { //接收参数
				let judgedHeight = _this.totalHeight * 2;
				if (data > judgedHeight) {
					_this.scrollProgress = 1;
				} else {
					let cha = judgedHeight - data;
					_this.scrollProgress = 1 - (cha / judgedHeight);
				}
				// console.log(data)
				// console.log(_this.scrollProgress)
				this.$emit("progressChange", _this.scrollProgress)
			});
		},
		// watch: {
		// 	src(e) {
		// 		this.loadingStatus = 0
		// 	}
		// },
		methods: {
			onClcik() {
				this.$emit("click")
			},
			onClickBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #F8F8F8;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>